<!-- 个人中心 -->
<template>
  <div class='container'>
    <titleCom text = "我的画像"></titleCom>
    <!-- 基本信息 -->
    <div class="baseInfo">
      <div class="leftImg">
        <img :src="baseInfo.photourl" alt="">
      </div>
      <div class="rightInfo">
        <div class="name">{{baseInfo.realname}}</div>
        <div class="otherInfo">
          <div>{{baseInfo.sex}}</div>
          <span class="line-I"></span>
          <div>{{baseInfo.usertype}}</div>
          <span class="line-I"></span>
          <div>{{baseInfo.partyduty}}</div>
        </div>
      </div>
    </div>
    <!-- 更多信息 -->
    <div>
      <div class="list-strip">
        <div class="list-strip-left">入党时间</div>
        <div class="list-strip-right">{{baseInfo.ybdybegindate}}</div>
      </div>
      <collapse-transition>
        <div class="collapse-wrap"
          v-show="isActive">
          <div class="list-strip" v-for="(item, index) in moreInfo" :key="index">
            <div class="list-strip-left">{{item.text}}</div>
            <div class="list-strip-right">{{item.info}}</div>
          </div>
        </div> 
      </collapse-transition>
      <div class="list-more" @click="isActive = !isActive">
        {{isActive? '收起' : '展开更多'}}
        <div class="moreSvg"><svg-icon :icon-class="isActive?'':'xiala'"></svg-icon></div>
      </div>
    </div>
    <!-- 全息画像同心圆 -->
    <div class="aCircle"></div>
    <!-- 党费,登高等四个卡片 -->
    <div class="cardBox">
      <div class="card" v-for="(item,i) in fourCard" :key="i">
        <div class="card-top">
          {{item.name}}
          <span class="grayTime">/ {{item.time}}</span>  
        </div>
        <div class="card-bottom">
          <div class="botLeft">
            {{item.number}}
            <span class="redCompany">{{item.name === '党费缴纳' ? '元' : '次'}}</span>
          </div>
          <div class="cardRight">
            <svg-icon icon-class="you"></svg-icon>
          </div>
        </div>
      </div>
    </div>
    <titleCom text = "任务公告"></titleCom>
    <div class="task">
      <div class="taskCard" v-for="(item,i) in taskCard" :key="i">
        <div class="taskCardImg">
          <div class="iconDiv">
            <svg-icon :icon-class="item.iconClass"></svg-icon>
          </div>
        </div>
        {{item.text}}
      </div>
    </div>
    <titleCom text = "党建一搜"></titleCom>
    <div class="serachDiv">
      <input type="text" placeholder="输入关键字...">
      <button>
        <div><svg-icon icon-class="search"></svg-icon></div>
      </button>
    </div>
    <titleCom text = "党建驾驶舱"></titleCom>
    <!-- tab切换 -->
    <div>
      <ul class="tabUl">
        <li 
          v-for="(item,index) in tabs"
          :key="index" 
          :class="{'activeLi':index == num}"
          @click="tab(index,'num')">{{item}}</li>
      </ul>
      <div class="tabCon">
          <div
            :key="idx"
            v-for='(itemCon,idx) in tabContents' 
            v-show=" idx == num">
            <div class="sonTab">
              <div 
                :class="{'activSonDiv':index == itemCon.sonNum}"
                v-for="(itemSon,index) in itemCon.tabArr" 
                :key="index"
                @click="tabSon(idx,index)">
                {{itemSon}}
              </div>
            </div>  
          </div>
      </div>
      <!-- 地图 -->
      <div v-if="isShowPicture" style="height:60rem;background:#ccc"></div>
      <!-- 表格 -->
      <div style="padding:1rem 3rem" v-if="isShowTable">
        <tables :current-table = "currentTable"></tables>
      </div>
      <div style="height:3rem"></div>
    </div>
    
    
  </div>
</template>

<script>
import titleCom from '../components/title'
import collapseTransition from '@/untils/transtion.js'
import tables from '../components/tables'
import { getUserInfo } from '@/api/index.js'
export default {
  components: {titleCom, collapseTransition,tables},
  data() {
  return {
      baseInfo: {},
      moreInfo: [
        {text: '转正时间', info: ''},
        {text: '出生时间', info: ''},
        {text: '参加工作时间', info: ''},
        {text: '所属党支部', info: ''}
      ],
      time: '',
      fourCard:[
        {name: '党费缴纳', time: '', number: ''},
        {name: '党员登高', time: '', number: ''},
        {name: '三会一课', time: '', number: ''},
        {name: '党建联系', time: '', number: ''}
      ],
      taskCard: [
        {text: '信息公告', iconClass: 'horn'},
        {text: '交办落实', iconClass: 'quluoshi'},
        {text: '党建履职', iconClass: 'weiyuanlvzhi'}
      ],
      isActive: false,
      tabs: ["基本组织", "基本队伍","基本制度"],
      num: 0,
      tabContents: [
        {tabArr:['基本组织情况','党组换届情况'],sonNum: 0},
        {tabArr:['基本队伍情况','发展党员情况'],sonNum: 0},
        {tabArr:['基本制度情况','三会一课情况','双重组织生活','党建联系'],sonNum: 0}
      ],
      currentTable: '0-0',
      usercode: '190648',
      roleId: '40280881368b3a6101368bb8a2010010'
    };
  },
  created () {
    this.getUserInfo({"methodName":"getUserInfo","usercode":this.usercode})
    this.getUserInfo({"methodName":"countData","usercode":this.usercode})
    this.getUserInfo({"methodName":"qxhx","usercode":this.usercode})
    this.currentTab()
  },
  computed:{
    isShowPicture(){ // 是否展示图片
      switch (this.currentTable) {
        case '0-0': return true;break;
        case '0-1': return true;break;
        case '2-0': return true;break;
        case '2-1': return true;break;
        default: return false
          break;
      }
    },
    isShowTable(){ // 是否展示table
      switch (this.currentTable) {
        case '0-0': return true;break;
        case '0-1': return true;break;
        case '1-0': return true;break;
        case '1-1': return true;break;
        case '2-1': return true;break;
        case '2-2': return true;break;
        case '2-3': return true;break;
        default: return false
          break;
      }
    },
  },
  methods: {
    getUserInfo(val){// 获取用户基本信息
      getUserInfo(val).then(res => {
        const data = res.data
        if (res.status == '1') { 
          switch (val.methodName) {
            case 'getUserInfo':
              this.handleGetUserInfo(data)
              break;
            case 'countData':
              this.handleCountData(data)
              break;
            case 'qxhx':
              this.handlepicture(data)
              break;
            default:
              break;
          }
        } else {
          this.$toast('服务器连接错误请重试');
        }
      })
    },
    handleGetUserInfo(data){// 基础信息
      this.baseInfo = data
      this.moreInfo[0].info = data.becomedate
      this.moreInfo[1].info = data.birthday
      this.moreInfo[2].info = data.beginworkdate
      this.moreInfo[3].info = data.organname
    },
    handleCountData(data){// 四个tab
      const date = new Date()
      const nowYear = date.getFullYear();
      const month = date.getMonth() + 1;
      if (month >= 4) {
        this.fourCard[0].time = nowYear
        this.fourCard[1].time = nowYear
        this.fourCard[2].time = nowYear
        this.fourCard[3].time = nowYear
      } else {
        this.fourCard[0].time = nowYear-1
        this.fourCard[1].time = nowYear-1
        this.fourCard[2].time = nowYear-1
        this.fourCard[3].time = nowYear-1
      }
      this.fourCard[0].number = data.partyfee
      this.fourCard[1].number = data.climb.actcount + '/' + data.climb.plancount
      this.fourCard[2].number = data.shyk.actcount + '/' + data.shyk.plancount
      this.fourCard[3].number = data.link.actcount + '/' + data.link.plancount
      
    },
    handlepicture(data){// 全息画像
      // console.log(data)
    },
    tab(index,feild) { // 一级tab切换
      this[feild] = index;
      this.currentTab()
    },
    tabSon(idx,index){ // 二级tab切换
      this.tabContents[idx].sonNum = index
      this.currentTab()
    },
    currentTab(){ // 当前tab 0-0 1-0
      this.currentTable =  this.num+'-'+this.tabContents[this.num].sonNum
    }
  }
}
</script>
<style scoped>
.sonTab{
  display: flex;
  height: 6rem;
  width: 100%;
  background: #FFDFE0;
  font-size: 2.4rem;
  border-top: 1rem solid #FFDFE0;
}
.activSonDiv{
  color: #BB383E;
  background: #ffffff;
  border-radius: 3rem 3rem 0 0;
}
.sonTab>div{
  flex: 1;
  text-align: center;
  padding: 1.3rem 0 1.4rem;
  
}
.activeLi{
  border-bottom: 2px solid #BB383E !important;
  color: #BB383E;
}
.tabUl>li{
  padding: 2.7rem 0;
  border-bottom: 2px solid #ffffff;
  box-sizing: border-box;
  font-size: 2.8rem;
}
.tabUl{
  list-style-type: none;
  display: flex;
  padding: 0 10.5rem;
  margin: 0;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rem solid #f4f4f4;
}
.serachDiv>input{
  border: none;
  outline: none;
}
.serachDiv>button>div{
  width:3rem;height:3rem
}
.serachDiv>button{
  width: 9rem;
  height: 4.8rem;
  background: #BB383E;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.serachDiv{
  height: 8.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.5rem;
  border-bottom: 1rem solid #f4f4f4;
}
.iconDiv{
  width: 5rem;
  height: 5rem;
}
.taskCardImg{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  border: 1px solid #f4f4f4;
  box-shadow: 0 0 5px #888888;
}
.taskCard{
  display: flex;
  width: 10rem;
  font-size: 2.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.task{
  height: 21rem;
  padding: 0 10rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rem solid #f4f4f4;
}
.moreSvg{
  width: 1.6rem;
  height: 1.6rem;
}
.botLeft{
  color: #BB383E;
  font-size: 3rem;
}
.cardRight{
  width: 2.4rem;
  height: 2.4rem;
}
.card-bottom{
  display: flex;
  justify-content: space-between;
}
.redCompany{
  color: #BB383E;
  font-size: 2.4rem;
}
.grayTime{
  color: #ccc;
  font-size: 2.4rem;
}
.card-top{
  font-size: 2.8rem;
  padding: 3rem 0 3.9rem;
}
.card:nth-child(1),.card:nth-child(2){
  margin-bottom: 1rem;
}
.card:nth-child(2),.card:nth-child(3){
  background: #FFE9E9;
  color: #BB383E;
}
.card:nth-child(1),.card:nth-child(4){
  background: #FFF3F3;
}
.card{
  padding: 0 3rem;
  height: 15rem;
  width:49.5%;
  background: darkgoldenrod;
}
.cardBox{
  padding: 1.8rem 3.4rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1rem solid #f4f4f4;
}
.aCircle{
  width: 100%;
  height: 60.8rem;
  border-top: 1rem solid #f4f4f4;
  border-bottom: 1rem solid #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-strip-right{
  flex: 7;
}
.list-strip-left{
  flex: 3;
}
.list-more{
  padding: 2.7rem 3.5rem;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #f4f4f4;
}
.list-strip:nth-child(1){
  border-top: 1px solid #f4f4f4;
}
.list-strip{
  padding: 2.7rem 3.5rem;
  display: flex;
  border-bottom: 1px solid #f4f4f4;
  align-items: center;
}
.container{
  font-size: 2.8rem;
}
.line-I{
  display: block;
  width:0.3rem;
  height: 2.8rem;
  background: #e2e2e2;
}
.otherInfo div{
  /* flex: 1; */
}
.otherInfo{
  display: flex;
  justify-content: space-between;
  width: 41.7rem;
  font-size: 2.8rem;
}
.name{
  font-size: 4.2rem;
  padding: 1.7rem 0 4.4rem;
}
.rightInfo{
  width: 81%;
}
.baseInfo{
  width: 100%;
  padding: 2.8rem 3.4rem 2.2rem;
  display: flex;
  justify-content: space-between;
}
.leftImg{
  width: 15%;
  height: 14rem;
  background: chartreuse;
}
.leftImg>img{
  width: 100%;
  height: 100%;
}
</style>